<template>
<div class="the-list">

  <div class="panel-table">
    <div class="table-head">
      <span>数据列表</span>
      <div v-if="hasPermission(['operation:message'])">
        <el-button type="primary" @click="goToAddPage">新增推送</el-button>
      </div>
    </div>
    <el-table :data="tableData.list" stripe :header-cell-style="{backgroundColor:'#ededed',padding:'12px 0'}" style="width: 100%;" border>
      <!-- <el-table-column prop="id" label="ID" /> -->
      <el-table-column prop="createdAt" label="创建时间" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="text" label="正文" >
        <template #default="{row}">
          <el-tooltip effect="light" placement="right" :show-after="300">
            <template #content>
              <div style="max-width: 600px;">
                {{row.text}}
              </div>
            </template>
            <div class="isBigText">{{row.text}}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="imageUrl" label="配图" /> -->
      <el-table-column prop="imageUrl" label="图片" width="106px">
        <template #default="{row}">
          <div v-if="row.imageUrl">
            <el-image style="width: 80px;height:45px;display:block;" fit="contain" :src="row.imageUrl"/>
          </div>
          <p v-else>--</p>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="链接">
        <template #default="{row}">
          <a v-if="isWebLink(row.url)" style="color: #40a9ff;text-decoration: underline;" :href="row.url" target="_target">{{row.url}}</a>
          <p v-else>{{row.url}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="sendAt" label="推送时间" />
      <el-table-column prop="type" label="类型">
        <template #default="{row}">
          {{["定时推送","实时推送"][row.type]}}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="{row}">
          <span :style="{color:['#D9001B','#70B603','#F59A23'][row.status]}">{{getItemFromArray(messageList.status,row.status) || "--"}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120px" align="center">
        <template #default="{row}">
          <el-button size="small" type="primary" plain @click="tableFn.goToDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="table-pagination">
      <pagination :total="tableData.total" v-model:page="tableData.query.page" v-model:limit="tableData.query.pageSize" @pagination="tableFn.getTableList" />
    </div>

  </div>

</div>
</template>

<script>
import { reactive,watch } from "vue";
import { getPullMessageList }  from "@/api/operation.js";
import { useRouter } from "vue-router";
import Pagination from "@/components/Pagination";
import {isWebLink} from "@/utils/tool.js"
import { messageList,getItemFromArray }  from "@/utils/tool.js";

export default {
  name: "messagePull",
  components: {
    Pagination,
  },
  setup() {
    const router = useRouter();
    // 默认数据备份，以便重置或恢复
    const { $data: tableData, $fn: tableFn } = tableModule();

    function goToAddPage(){
      router.push(`/operation/messagePull/operate?type=add`);
    }
    watch(()=>router.currentRoute.value,(nv,ov)=>{
      if(nv.name === "messagePull" && (ov.name==="messageOperate" || ov.name==="messageDetail")){
        console.log("from:",ov,"to:",nv);
        tableData.query.page = 1;
        tableFn.getTableList();
      }
    })
    return {
      tableData,
      tableFn,
      isWebLink,
      goToAddPage,
      messageList,getItemFromArray
    };
  },
};

// 表格功能模块，包括搜索，分页等
function tableModule() {
  const router = useRouter();
  const backup = {
    query: {
      pageSize: 10,
      page: 1,
    },
  };
  const $data = reactive({
    query: { ...backup.query },
    list: [],
    total: 0,
  });
  const $fn = {
    getTableList() {
      getPullMessageList($data.query).then((res) => {
        if (res.code === 0) {
          $data.list = res.data.items || [];
          $data.total = res.data.pagination.total_record;
        }
      });
    },
    onResetQuery() {
      $data.query = { ...backup.query };
      $fn.getTableList();
    },
    onSubmit() {
      $fn.getTableList();
    },
    goToDetail(row){
      let addQuery = "";
      if(row.status===1){//=1,已推送，则显示统计
        addQuery = "?statistics=show"
      }
      router.push('/operation/messagePull/detail/' + row.id +addQuery);
    }
  };

  $fn.getTableList();

  return {
    $data,
    $fn,
  };
}

</script>

<style scoped lang="scss">
@import "@/styles/tablePage.scss";
.the-list{
  height: 100%;
}
.el-form-item {
  margin-bottom: 8px;
}
</style>